---
title: React Mega Menu - Flowbite
description: Use the mega menu component as a full-width dropdown inside the navbar to show a list of menu items based on multiple sizes, variants, and styles.
---

The mega menu component is a full-width dropdown that can be triggered by clicking on the menu item and it shows a list of links that you can use to navigate through the pages on a website.

To start using the mega menu component you need to import it from `flowbite-react`:

```jsx
import { MegaMenu } from "flowbite-react";
```

## Default mega menu

Use this example to show a list of links aligned on three columns inside the mega menu dropdown.

<Example name="megaMenu.root" />

## Mega menu with icons

This example of a mega menu dropdown can be used to also show an icon near the text of the link.

<Example name="megaMenu.icons" />

## Full width dropdown

Use this example to show a mega menu dropdown that spans the entire width of the document page.

<Example name="megaMenu.fullWidth" />

## Full width with CTA

This example can be used to also show a CTA button or link next to the menu items inside the dropdown.

<Example name="megaMenu.fullWidthCTA" />

## Full width with image

This example can be used to also show a CTA with a background image inside the dropdown next to the other menu items and links.

<Example name="megaMenu.fullWidthImage" />

## Theme

Note:

- `<MegaMenu>`'s theme has all of the same options as [`<Navbar>`](https://flowbite-react.com/docs/components/navbar)'s, with slightly different defaults
- `<MegaMenuDropdown toggle={..} />`'s theme, `megaMenu.dropdown.toggle`, is identical to [`<Dropdown>`](https://flowbite-react.com/docs/components/dropdown), with slightly different defaults

<Theme name="megaMenu" />

## References

- [Flowbite Mega Menu](https://flowbite.com/docs/components/mega-menu/)
